<template>
	<view style="height: 100%;">
		<u-navbar style="position: fixed;" background="rgba(0,0,0,0)" is-fixed="true" z-index="999" title=" "></u-navbar>
		<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/niudanji.png" mode="widthFix" style="width: 100%;"></image>

		<view style="position: absolute;left: 50%;margin-left: -150px;bottom: 120px;">
			<image @click="kaishi" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/jiqi.png" mode="" style="width:300px;height: 320px;"></image>
			<view style="width: 216px;height: 197px;position: absolute;z-index:1;top: 10px;left: 45px;">
				<image
					v-for="(item, index) in 7"
					:class="istrue ? 'weiyi_' + index : 'weiyi' + index"
					style="position: absolute;"
					class="ball ball_1"
					src="https://acceleratepic.miniso.com/miniso/ball1.png"
				></image>
			</view>
			<!-- <view> -->
			<image
				v-if="ktrue"
				@click="kaijiang"
				style="position: absolute;bottom: 15px;left: 60px;z-index: 1;"
				class="ball ball_1"
				src="https://acceleratepic.miniso.com/miniso/ball1.png"
			></image>
			<!-- </view> -->
		</view>

		<u-popup v-model="ktrue" mode="center">
			<view style="box-sizing: border-box;padding: 20px;">
				<view style="text-align: center;width: 300px;color: #F98080;font-size: 30rpx;" class="bg">恭喜你获得一颗情侣扭蛋</view>
				<view style="text-align: center;margin: 10px;"><image style="width: 90px;height: 90px;" class="ball ball_1" src="../../static/niu/ball.png"></image></view>
				<view class="flex">
					<view style="width: 120px;"><u-button @click="ktrue = false" shape="circle" type="error">取消</u-button></view>
					<view class="animat" style="width: 120px;margin-left: auto;">
						<u-button @click="kaijiang(), (ktrue = false), (show = true)" shape="circle" type="warning">立即打开</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show" mode="center">
			<view style="padding: 20px;" class="gift-wrapper">
				<!-- <view style="text-align: center;font-size: 16px;font-weight: bold;margin-bottom: 20px;">恭喜您获得</view> -->
				<image class="header" src="../../static/niu/gift.png" mode=""></image>
				<view class="name">{{ form.love_volume_title }}</view>
				<image class="line" src="../../static/niu/line.png" mode=""></image>
				<view class="desc">发送给对方后，你可以随时行使一次爱的特权</view>
				<view class="options-btn">
					<button class="again" @click="kaishi">再来一次</button>
					<button class="send" open-type="share">发送给对方</button>
				</view>
				<!-- <view style="width: 100%;border: #eee solid 1px;padding: 10px;border-radius: 8px;" class="flex">
					<view>
						<view class="f12 flex a-t">
							<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/hx.png" mode="widthFix" style="width: 20px;"></image>
							爱情兑换券
						</view>
						<view>{{ form.love_volume_title }}</view>
						<view class="f12">赠送后生效，对方可行使一次爱的特权</view>
					</view>
					<view style="text-align: center;border-left: #eee dashed 1px;box-sizing: border-box;margin-left: 6px;padding-left: 6px;" class="f12">
						有效期
						<view>{{ form.createtime }}</view>
						<button open-type="share" class="botton f12">立即赠送</button>
					</view>
				</view> -->
			</view>
		</u-popup>
		<view @click="my('./list')" class="button f14" style="width: 120px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 50px; left:20px; ">
			爱情兑换券
		</view>
		<view @click="my('./my')" class="button f14" style="width: 120px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 50px;right: 20px;">
			我扭到的
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			istrue: false,
			ktrue: false,
			show: false,
			form: {}
		};
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '送你一张情侣特权卡',
			path: '/pages/niu/niu?volume_id=' + this.form.id
		};
	},
	onLoad(e) {
		if (e.volume_id) {
			this.lingqu(e.volume_id);
		}
	},
	methods: {
		kaishi() {
			// createtime: "2022-09-04 11:43:39"
			// id: "8"
			// love_volume_id: 2
			// love_volume_title: "听话卷"
			// owner_user_id: 2
			// updatetime: "2022-09-04 11:43:39"
			this.istrue = true;
			this.show = false
			setTimeout(() => {
				this.istrue = false;
				this.ktrue = true;
			}, 2000);
		},
		lingqu(e) {
			let data = {
				volume_id: e
			};
			this.$u.apis.get_volume(data).then(re => {
				uni.showToast({
					title: '恭喜您领取成功',
					icon: 'none'
				});
			});
		},

		async kaijiang() {
			let res = await this.$u.apis.twist();
			this.form = res;
		},
		my(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style>
page {
	height: 100%;
	overflow: hidden;
}
view,
text {
	box-sizing: content-box;
}
.ball {
	z-index: 1;

	width: 30px;
	height: 30px;
}
.weiyi0 {
	left: 54px;
	bottom: 10px;
}
.weiyi1 {
	left: 64px;
	bottom: 10px;
}
.weiyi2 {
	left: 84px;
	bottom: 19px;
}
.weiyi3 {
	left: 101px;
	bottom: 23px;
}
.weiyi4 {
	left: 162px;
	bottom: 25px;
}
.weiyi5 {
	left: 125px;
	bottom: 13px;
}
.weiyi6 {
	left: 141px;
	bottom: 10px;
}
.weiyi_0 {
	left: 54px;
	bottom: 10px;
	animation-name: around0;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-delay: 0s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_1 {
	left: 64px;
	bottom: 10px;
	animation-name: around1;
	animation-duration: 1.8s;
	animation-timing-function: linear;
	animation-delay: 0.1s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_2 {
	left: 84px;
	bottom: 19px;
	animation-name: around2;
	animation-duration: 1.9s;
	animation-timing-function: linear;
	animation-delay: 0.2s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_3 {
	left: 101px;
	bottom: 23px;
	animation-name: around3;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_4 {
	left: 162px;
	bottom: 25px;
	animation-name: around3;
	animation-duration: 1.8s;
	animation-timing-function: linear;
	animation-delay: 0.3s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_5 {
	left: 125px;
	bottom: 13px;
	animation-name: around3;
	animation-duration: 1.6s;
	animation-timing-function: linear;
	animation-delay: 0.4s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
.weiyi_6 {
	left: 141px;
	bottom: 10px;
	animation-name: around3;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-delay: 0.2s;
	/* animation-iteration-count: infinite; */
	animation-direction: alternate;
	animation-play-state: running;
}
@keyframes around0 {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(60px, -140px);
	}
	40% {
		transform: translate(80px, -60px);
	}
	60% {
		transform: translate(100px, -110px);
	}
	80% {
		transform: translate(40px, -20px);
	}
	100% {
		transform: translate(0, 0);
	}
}
@keyframes around1 {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(60px, -130px);
	}
	40% {
		transform: translate(80px, -50px);
	}
	60% {
		transform: translate(100px, -115px);
	}
	80% {
		transform: translate(40px, -10px);
	}
	100% {
		transform: translate(0, 0);
	}
}
@keyframes around2 {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(60px, -115px);
	}
	40% {
		transform: translate(80px, -50px);
	}
	60% {
		transform: translate(70px, -115px);
	}
	80% {
		transform: translate(40px, -10px);
	}
	100% {
		transform: translate(0, 0);
	}
}
@keyframes around3 {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(-60px, -130px);
	}
	40% {
		transform: translate(-80px, -50px);
	}
	60% {
		transform: translate(-90px, -100px);
	}
	80% {
		transform: translate(-40px, -10px);
	}
	100% {
		transform: translate(0, 0);
	}
}
</style>
<style scoped lang="scss">
/deep/ .u-mode-center-box {
	border-radius: 20rpx;
}
/deep/ .gift-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	.header {
		width: 300rpx;
		height: 300rpx;
	}
	.name {
		text-align: center;
		font-size: 40rpx;
		color: #000;
		margin-top: 60rpx
	}
	.line {
		width: 50%;
		height: 8rpx;
		margin-top: 60rpx
	}
	.desc {
		width: 70%;
		text-align: center;
		font-size: 30rpx;
		color: #797474;
		margin: 60rpx 0;
	}
	.options-btn {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		button {
			border-radius: 50rpx;
			padding: 10rpx 60rpx;
			font-size: 30rpx;
			color: #fff;
			text-align: center
		}
		button.again {
			background: #FB3534;
		}
		button.send {
			background: #FE9B02;
		}
		button::after {
			content: '';
			display: none;
		}
	}
}
</style>
